<!--
 *  ┌─────────────────────────────────────────────────────────────┐
 *  │┌───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┐│
 *  ││Esc│!1 │@2 │#3 │$4 │%5 │^6 │&7 │*8 │(9 │)0 │_- │+= │|\ │`~ ││
 *  │├───┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴───┤│
 *  ││ Tab │ Q │ W │ E │ R │ T │ Y │ U │ I │ O │ P │{[ │}] │ BS  ││
 *  │├─────┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴─────┤│
 *  ││ Ctrl │ A │ S │ D │ F │ G │ H │ J │ K │ L │: ;│" '│ Enter  ││
 *  │├──────┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴────┬───┤│
 *  ││ Shift  │ Z │ X │ C │ V │ B │ N │ M │< ,│> .│? /│Shift │Fn ││
 *  │└─────┬──┴┬──┴──┬┴───┴───┴───┴───┴───┴──┬┴───┴┬──┴┬─────┴───┘│
 *  │      │Fn │ Alt │         Space         │ Alt │Win│   HHKB   │
 *  │      └───┴─────┴───────────────────────┴─────┴───┘          │
 *  └─────────────────────────────────────────────────────────────┘
 -->


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>防篡改水印</title>
  <style>
    .container{
        width: 100%;
        height: 97vh;
        display: flex;
        justify-content:space-evenly;
        align-items: center;
        background-color: aqua;
    }
    .content{
        width: 400px;
        height: 400px;
        background-color: chartreuse;
        position: relative;
    }
    .content:nth-child(1){
        background-color: rgb(207, 210, 21);
    }
    .content:nth-child(2){
        background-color: chartreuse;
    }
    .waterMark{

    }
  </style>
</head>

<body>
    <div class="container">
        <div class="content">
            <div class="waterMark">1212</div>
        </div>
        <div class="content">
            <div class="waterMark"></div>
        </div>
    </div>
</body>
<script>
    let bg=useWatermarkBg(18,'版权所有');
    let content=document.querySelectorAll(".content");
    let waterMark=document.querySelector(".waterMark");
    let div=null;
    resetWaterMark();
    function resetWaterMark(){
        for(let i=0;i<content.length;i++){
            let base64=bg.base64;
            let size=bg.size;
            // if(div){
            //     div.remove();
            // }
            div=document.createElement("div");
            div.style.position='absolute';
            div.style.backgroundImage=`url(${base64})`;
            div.style.backgroundSize=`${size}px ${size}px`;
            div.style.backgroundRepeat='repeat';
            div.style.zIndex=9999;
            div.style.inset=0;
            content[i].appendChild(div)
        }
    }
    /**
     * fontsize:文字大小
     * text:文字内容
    */
    function useWatermarkBg(fontsize,text){
        //生成水印canvas
        const canvas=document.createElement("canvas");
        const devicePixeRatio=window.devicePixelRatio||1;
        const fontSize= fontsize*devicePixeRatio;
        const font=fontSize+'px serif';
        const ctx=canvas.getContext('2d');
        //获取文字宽度
        const {width}=ctx.measureText(text);
        const canvasSize=Math.max(100,width)+10*devicePixeRatio;
        canvas.width=canvasSize;
        canvas.height=canvasSize;
        ctx.translate(canvas.width/2,canvas.height/2);
        ctx.rotate((Math.PI/180)*-45);
        ctx.fillStyle='rgba(0,0,0,0.3)';
        ctx.font=font;
        ctx.textAlign="center";
        ctx.textBaseline='middle';
        ctx.fillText(text,0,0);
        return {
            base64:canvas.toDataURL(),
            size:canvasSize/devicePixeRatio,
        }
    }
    const ob=new MutationObserver((entries)=>{
        for(const entry of entries){
            //删除
            for(const dom of entry.removedNodes){
                if(dom===div){
                    resetWaterMark();
                    return;
                }
            }
            //修改
            if(entry.target===div){
                console.log('水印被修改');
                resetWaterMark();
                return;
            }
        }
        
    })
    for(let i=0;i<content.length;i++){
        ob.observe(content[i],{
            childList:true,
            subtree:true,
            attributes:true
        })
    }
    console.log(` ┌─────────────────────────────────────────────────────────────┐`);
    console.log(` │┌───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┐│`);
    console.log(` ││Esc│!1 │@2 │#3 │$4 │%5 │^6 │&7 │*8 │(9 │)0 │_- │+= │|\\ │ ~ ││`);
    console.log(` │├───┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴───┤│`);
    console.log(` ││ Tab │ Q │ W │ E │ R │ T │ Y │ U │ I │ O │ P │{[ │}] │ BS  ││`);
    console.log(` │├─────┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴─────┤│`);
    console.log(` ││ Ctrl │ A │ S │ D │ F │ G │ H │ J │ K │ L │: ;│" '│ Enter  ││`);
    console.log(` │├──────┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴────┬───┤│`);
    console.log(` ││ Shift  │ Z │ X │ C │ V │ B │ N │ M │< ,│> .│? /│Shift │Fn ││`);
    console.log(` │└─────┬──┴┬──┴──┬┴───┴───┴───┴───┴───┴──┬┴───┴┬──┴┬─────┴───┘│`);
    console.log(` │      │Fn │ Alt │         Space         │ Alt │Win│   HHKB   │`);
    console.log(` │      └───┴─────┴───────────────────────┴─────┴───┘          │`);
    console.log(` └─────────────────────────────────────────────────────────────┘`);
</script>